
<template>
  <div id="cornerComment" v-if="dialogVisible">
    <div class="cornerComment-in">
      <div class="cornerComment-in-title">
        <span>{{`${foodId?'编辑':'发布'}点评`}}</span>
        <span class="el-icon-circle-close close-Btn-line" @click="checkVideoStatus"></span>
      </div>
      <div class="commentBody">
      <el-form ref="infoForm" label-width="90px">
        <el-form-item label="同步园区:" v-if="!foodId">
          <el-checkbox-group v-model="checkList">
            <el-checkbox :label="item.id" v-for="item of schoolList">{{item.name}}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="点评日期:">
          <el-date-picker type="date"
                          placeholder="选择日期"
                          v-model="getTime"
                          :picker-options="pickerOptions1"
                          value-format="yyyy-MM-dd"
                          v-if="!foodId"></el-date-picker>
          <span v-else>{{ getTime }}</span>
        </el-form-item>
        <div class="foodList-box">
          <template v-for="(item,index) in typelist">
            <el-form-item :label="`${item.name}:`" v-if="item.id">
              <el-tag
                  :key="tag.id"
                  closable
                  v-for="(tag,tagindex) in item.list"
                  class="mr-10 tag-box"
                  @close="closefoodBox(index, tagindex)"
              >{{ tag.name }}
              </el-tag>
              <el-button class="button-new-tag" size="small" @click="getFoodList(item.id)">选择需要发布的餐品</el-button>
            </el-form-item>
          </template>
        </div>
      </el-form>
      </div>
      <div class="cornerComment-in-footer">
        <el-button @click.native="checkVideoStatus" size="small">取消</el-button>
        <el-button size="small" type="primary" @click="onSubmitFn">{{`${foodId?'编辑点评':'确认并保存全天的发布'}`}}</el-button>
      </div>
    </div>
        <listModule :visible.sync="footerVisible" @studentFn="studentFn"
                    :dynamicTagsArray="dynamicTagsArray"></listModule>
  </div>
<!--    </div>-->
<!--    <div slot="footer" class="dialog-footer">-->
<!--      <el-button @click="checkVideoStatus" size="small">返回</el-button>-->
<!--      <el-button type="primary" @click="onSubmitFn" size="small" v-if="editStatus">确认并保存全天的发布</el-button>-->
<!--    </div>-->
<!--    <listModule :visible.sync="footerVisible" @studentFn="studentFn"-->
<!--                :dynamicTagsArray="dynamicTagsArray"></listModule>-->
<!--  </el-dialog>-->
</template>
<script>
import listModule from "./listModule";
import {yearDay} from '@/utils/util.js';
import {schoolIndex} from '@/api/admin/system'

export default {
  name: 'food',
  props: ['visible', 'foodId'],
  components: {
    listModule
  },
  data() {
    return {
      dialogVisible: this.visible,
      pickerOptions1:
          {
            disabledDate(time) {
              return //  time.getTime() < Date.now() - 8.64e7
            }
          },
      getTime: '',
      footerVisible: false,
      dynamicTagsArray: {},
      editStatus: true,
      radioType: 0,
      typelist: [
        {
          id: 0,
          name: '全天',
          list: []
        },
        {
          id: 1,
          name: '早点',
          list: []
        },
        {
          id: 2,
          name: '午餐',
          list: []
        },
        {
          id: 4,
          name: '水果',
          list: []
        },
        {
          id: 3,
          name: '午点',
          list: []
        }
      ],
      checkList: [],
      schoolList: []
    }
  },
  watch: {
    visible() {
      this.dialogVisible = this.visible
      if (this.visible) {
        if (this.foodId) {
          this.eidtGetOption()
        } else {
          // this.checkTime()
          this.editStatus = true;
        }
        this.schoolIndexFn()
      } else {
        this.getTime = '';
        this.dynamicTagsArray = {}
        this.clearTable()
      }
    }
  },
  created() {

  },
  methods: {
    schoolIndexFn(){
      schoolIndex().then(res=>{
        let list_ = JSON.parse(JSON.stringify(res.list))
        for(let item of list_){
          this.checkList.push(item.id)
        }
        this.schoolList = list_
      })
    },
    onSubmitFn() {
      // dish_id pic
      let n =this
      if(!this.checkList.length){
        this.$message.error('选择需要发布的园区')
        return
      }
      if (!this.getTime) {
        this.$message.error('选择点评日期')
        return
      }
      let dynamicTagsId = []
      let a = 0
      for (let item of this.typelist) {
        if (item.list.length) {
          a = 1
          for (let items of item.list) {
            items.type = item.id
            dynamicTagsId.push(items)
          }
        }
      }
      if (!a) {
        this.$message.error('选择发布的点评餐品')
        return
      }
      let data_ = [];
      for (let i in dynamicTagsId) {
        let arry_ = {};
        arry_.dish_id = dynamicTagsId[i].dish_id;
        arry_.type = dynamicTagsId[i].type;
        arry_.pic = '';
        data_.push(arry_)
      }
      let option = {
        time: this.getTime,
        data: JSON.stringify(data_)
      }
      if (this.foodId){
        option.id = this.foodId;
      }else{
        option.school_id = this.checkList.join(',');
      }
      this.$post(this.foodId ? this.api.food.edit : this.api.release_add, option).then((response) => {
        if (!response.code) {
          this.radioType = 0;
          this.$message.success(response.msg)
          this.$emit('InitFn')
          setTimeout(()=>{
            n.checkVideoStatus()
            this.getTime = ''
            n.clearTable()
          },500)
        } else {
          this.$message.error(response.msg)
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    handleClose(line, index){
      console.log(line, index)
    },
    // 关闭
    checkVideoStatus() {
      this.$emit('update:visible', false)
    },
    closefoodBox(indexLine, index) {
      this.typelist[indexLine].list.splice(index, 1)
    },
    studentFn(option) {
      let n = this;
      let foodList = [];
      for (let i in option) {
        option[i].dish_id = i
        foodList.push(option[i])
      }
      for (let j in this.typelist) {
        if (Number(this.radioType) === Number(this.typelist[j].id)) {
          let a = this.typelist[j]
          a.list = foodList
          n.$set(n.typelist, j, n.getJson(a))
        }
      }

      this.dynamicTagsArray = {}
    },
    getJson(option) {
      return JSON.parse(JSON.stringify(option))
    },
    getFoodList(option) {
      let that = this;
      this.radioType = option;
      this.dynamicTagsArray = {}
      for (let i in this.typelist) {
        if (Number(option) === Number(this.typelist[i].id)) {
          if (this.typelist[i].list.length) {
            let a = {}
            for (let item of this.typelist[i].list) {
              a[item.dish_id] = item
            }
            that.dynamicTagsArray = that.getJson(a)
            console.log('that.dynamicTagsArray:', that.dynamicTagsArray)
          }
        }
      }
      this.footerVisible = true
    },
    eidtGetOption() {
      let that = this
      this.$fetch(this.api.food.edit, {
        id: this.foodId,
      }).then((response) => {
        this.getTime = response.vo.create_time.split(' ')[0];
        let list = {}
        for (let i in response.vo.dish) {
          let list_ = list[response.vo.dish[i].type] || []
          list_.push(response.vo.dish[i])
          list[response.vo.dish[i].type] = list_
        }
        // typelist
        for (let i in this.typelist) {
          let data_ = this.typelist[i]
          data_.list = list[this.typelist[i].id] || []
          this.$set(this.typelist, i, that.getJson(data_))
        }
        console.log('this.typelist:',this.typelist)
        // 验证时间是否过期
        let str = this.getTime.replace(/-/g, "/");
        let curDate = new Date(),
            endDate = new Date(str + ' 12:30');
        if (curDate <= endDate) {
          console.log('时间之前')
          this.editStatus = true
        } else {
          console.log('超时了')
          this.editStatus = false
        }
        // if(date < now) {
        //   console.log('已过期不可编辑')
        //   this.editStatus = false
        // } else {
        //   console.log('未过期可以编辑')
        //   this.editStatus = true
        // }
      }).catch((err) => {
        console.log(err)
      })
    },
    checkTime() {
      // 验证时间是否过期
      let str = '';
      if (this.getTime) {
        str = this.getTime.replace(/-/g, "/");
      } else {
        str = yearDay(new Date()).replace(/-/g, "/")
      }
      let curDate = new Date(),
          endDate = new Date(str + ' 12:30');
      if (curDate <= endDate) {
        console.log('时间之前')
      } else {
        console.log('超时了')
        this.pickerOptions1 =
            {
              disabledDate(time) {
                return time.getTime() < Date.now()
              }
            }
      }
    },
    clearTable() {
      this.checkList = []
      this.typelist = [
        {
          id: 0,
          name: '全天',
          list: []
        },
        {
          id: 1,
          name: '早餐',
          list: []
        },
        {
          id: 2,
          name: '午餐',
          list: []
        },
        {
          id: 4,
          name: '水果',
          list: []
        },
        {
          id: 3,
          name: '午点',
          list: []
        }
      ]
    }
  },
  mounted() {
  }
}
</script>
<style scoped>
#cornerComment {
  height: 100vh;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, .5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9;
}

.cornerComment-in {
  width: 50%;
  height: 500px;
  background: #fff;
  display: flex;
  flex-direction: column;
  border-radius: 5px;
}

.cornerComment-in-title {
  height: 50px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ddd;
  font-size: 24px;
}

.cornerComment-in-title span {
  padding: 0 10px;
}

.cornerComment-in-title span:first-child {
  flex: 1;
  font-size: 16px;
}

.cornerComment-in-footer {
  height: 50px;
  border-top: 1px solid #ddd;
  display: flex;
  align-items: center;
  padding: 0 10px;
  justify-content: center;
}

.commentBody {
  padding: 20px;
  flex: 1;
  overflow-y: auto;
}

.close-Btn-line {
  cursor: pointer;
}
.footer-release {
  padding: 20px 0 0;
  min-height: 400px;
}

.last-day-list-box {
  padding: 20px 0 0;
  max-height: 460px;
  overflow-y: auto;
}

.last-day-list-box-body {
  border: 1px solid #000;
  border-radius: 6px;
  cursor: pointer;
  width: 100px;
  float: left;
  margin-right: 20px;
  color: #333;
  margin-bottom: 20px;
  position: relative;
}

.last-day-list-box-body:hover {
  box-shadow: 0 0 14px #1b8de5;
}

.close-btn-foot {
  position: absolute;
  top: -15px;
  right: -15px;
  color: red;
  font-size: 30px;
  width: 30px;
  height: 30px;
  line-height: 30px;
  margin: 0;
}

.last-day-list-box-img {
  width: 98px;
  height: 98px;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;

}

.last-day-list-box-title {
  text-align: center;
  color: #000;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.foodList-box {
  max-height: 400px;
  overflow-y: auto;
}
</style>
